<!--系统文档-->
<template>
  <div id="systemDocument" class="app-container flex-row">
    <div class="conmmon-container-main">
      <el-alert
        style="margin-bottom: 10px"
        :title="'当前文件存储方式为：'+storageLocation"
        type="success" />
      <div v-if="filePath.length>0 " style="padding: 0 10px;background: #fff; margin-bottom: 10px;">
        <div class="flex-row" style="align-items: center;height: 50px;">
          <div style="flex: 1;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item v-for="(item,index) in filePath" :key="item.index">
                <el-link v-if="index != filePath.length-1" :underline="false" @click="handleBreacrumb(item)">
                  {{ item.catalogName }}
                </el-link>
                <el-link v-if="index == filePath.length-1" :underline="false" style="color: rgb(71, 119, 231) !important;">
                  {{ item.catalogName }}
                </el-link>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
      </div>
      <!--列表-->
      <div class="table-container flex-main">
        <div class="table-container-header">
          <table-toolbar :create="false" :remove="false" @refresh="handleFilter">
            <template>
              <el-button icon="el-icon-folder-add" type="text" @click="handleCreateFolder">新建文件夹</el-button>
            </template>
            <template slot="rightTool">
              <el-input v-model="listQuery.keyword" clearable placeholder="请输入关键字" style="width:260px" />
            </template>
          </table-toolbar>
        </div>
        <el-table
          ref="multipleTable"
          :data="list"
          header-cell-class-name="table-header"
          fit
          height="100%"
          highlight-current-row
          @cell-mouse-enter="handleCellMouseEnter"
          @cell-mouse-leave="handleCellMouseLeave"
          @selection-change="handleSelectionChange"
          @row-click="handleRowClick"
          @sort-change="sortChange">
          <el-table-column label="文件名称" prop="name" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <fileViewer v-if="scope.row.file" :type="scope.row.fileType" :url="scope.row.uuid" :title="scope.row.name">
                <div class="file-icon">
                  <img v-if="scope.row.fileType===1" :src="common.getFileView(scope.row.uuid)" style="width: 2.4em;" @error="handleImageError">
                  <FileTypeSvgIcon v-else :type="scope.row.fileType" />
                </div>
                <div class="file-name" style="margin-left: 8px;">{{ scope.row.name }}</div>
              </fileViewer>
              <fileViewer v-else :type="scope.row.fileType" :url="scope.row.uuid" :title="scope.row.name" @click="handleCatalogClick(scope.row)">
                <div class="file-icon">
                  <FileTypeSvgIcon :type="scope.row.fileType" />
                </div>
                <div class="file-name" style="margin-left: 8px;">{{ scope.row.name }}</div>
              </fileViewer>
            </template>
          </el-table-column>
          <el-table-column label="大小" prop="fileSize" width="140">
            <template slot-scope="scope">
              {{ scope.row.fileSize | formatFileSize }}
            </template>
          </el-table-column>
          <el-table-column label="存储位置" prop="storageLocation" align="center" width="140">
            <template slot-scope="scope">
              <span v-if="!scope.row.file">- </span>
              <span v-else>{{ storageLocations.filter((item)=>item.value===scope.row.storageLocation)[0].label }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作者" prop="realName" width="100" show-overflow-tooltip />
          <el-table-column label="最后修改" prop="gmtModified" width="140">
            <template slot-scope="scope">
              {{ scope.row.gmtModified | formatDate }}
            </template>
          </el-table-column>
          <el-table-column width="60">
            <template slot-scope="scope">
              <el-dropdown trigger="click">
                <span v-show="showOption && selectedRowId===scope.row.id" class="el-dropdown-link common-cursor">
                  <i class="el-icon-more el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="handleRename(scope.row)">重命名</el-dropdown-item>
                  <el-dropdown-item v-if="!scope.row.file " style="color:red" @click.native="handleRemoveFolder(scope.row)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="pagination_handler">
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
      </div>
    </div>
    <div class="conmmon-container-left scroll__y__content scrollbar-no-width" style="width:280px;border-left: 1px solid #E6E6E6;padding: 0px; margin: 0px;">
      <file-property-panel ref="filePropertyPanel" />
    </div>
    <!--重命名-->
    <el-dialog :visible.sync="renameVisible" :close-on-click-modal="false" title="重命名" width="500px">
      <el-input v-model="recordForm.fileName" placeholder="请输入名称" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="renameVisible = false">取消</el-button>
        <el-button type="primary" @click="doRename">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FilePropertyPanel from './filePropertyPanel.vue'
export default {
  components: { FilePropertyPanel },
  props: {
    catalogId: {
      type: String,
      default: ''
    },

    filePath: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        keyword: undefined,
        sort: this.common.SORT_DEFAULT
      },

      multipleSelectionRecords: [],
      currentSelectedData: {},
      showOption: false,
      selectedRowId: null,
      renameVisible: false,
      recordForm: {

      },
      storageLocations: [
        { value: 0, label: '本地' },
        { value: 1, label: '阿里云' },
        { value: 2, label: '腾讯云' },
        { value: 3, label: '百度云' }
      ],
      storageLocation: '-'
    }
  },
  watch: {
    catalogId: function(val) {
      this.listQuery = {
        ...this.listQuery,
        catalogId: val
      }
      this.fetchCurrentSelectedData(false, val)
      this.handleFilter()
    },
    'listQuery.keyword': function(val) {
      this.handleFilter()
    }
  },
  created() {
    this.fetchStorageLocation()
  },
  methods: {
    fetchStorageLocation() {
      this.$store.dispatch('fileStorageLocation').then((res) => {
        this.storageLocation = this.storageLocations.filter((item) => item.value === res)[0].label
      })
    },
    // 表格自带方法开始
    /* 全选/反选*/
    handleSelectionChange(val) {
      this.multipleSelectionRecords = val
    },
    /* 表格行数据单击*/
    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
      this.fetchCurrentSelectedData(row.file, row.id)
    },
    handleCellMouseEnter(row) {
      this.showOption = true
      this.selectedRowId = row.id
    },
    handleCellMouseLeave(row) {
      this.showOption = false
      this.selectedRowId = ''
    },
    /* 表格列排序*/
    sortChange(data) {
      const { prop, order } = data
      if (prop) {
        if (order === 'ascending') {
          this.listQuery.sort = '+' + prop
        } else {
          this.listQuery.sort = '-' + prop
        }
      } else {
        this.listQuery.sort = this.common.SORT_DEFAULT
      }
      this.handleFilter()
    },
    // 表格自带方法结束

    /* 搜索*/
    handleFilter() {
      this.listQuery = {
        ...this.listQuery,
        sort: this.common.SORT_DEFAULT,
        page: 1
      }
      this.fetchData()
    },
    /* 重置*/
    handleReset() {
      this.listQuery = {
        ...this.listQuery,
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        keyword: undefined,
        sort: this.common.SORT_DEFAULT
      }
      this.fetchData()
    },
    async fetchData() {
      const response = await this.$store.dispatch('fileResourcesPage', this.listQuery)
      this.list = response.records
      this.total = response.total
    },
    handleCatalogClick(row) {
      this.$emit('callbackCatalog', row.id)
      this.fetchCurrentSelectedData(false, row.id)
    },
    handleBreacrumb(item) {
      this.$emit('callbackCatalog', item.id)
      this.fetchCurrentSelectedData(false, item.id)
    },
    fetchCurrentSelectedData(isFile, id) {
      this.$nextTick(() => {
        this.$refs.filePropertyPanel.init(isFile, id, this.filePath)
      })
    },

    handleCreateFolder() {
      this.$emit('handleEvent', 'newFolder')
    },
    handleRename(row) {
      this.recordForm = {
        id: row.id,
        fileName: row.name,
        file: row.file
      }
      this.renameVisible = true
    },
    doRename() {
      if (this.recordForm.file) {
        this.$store.dispatch('fileResourcesRename', { id: this.recordForm.id, originalFileName: this.recordForm.fileName }).then(response => {
          this.renameVisible = false
          this.$modal.msgSuccess('文件重命名成功')
          this.handleFilter()
          this.$refs.filePropertyPanel.init(true, this.recordForm.id, this.filePath)
        }).catch(() => {
        })
      } else {
        this.$store.dispatch('updateCatalogNameById', { id: this.recordForm.id, catalogName: this.recordForm.fileName }).then(response => {
          this.renameVisible = false
          this.$modal.msgSuccess('文件夹重命名成功')
          this.currentSelectedData = {
            ...this.currentSelectedData,
            catalogName: this.recordForm.fileName
          }
          this.handleFilter()
          this.$refs.filePropertyPanel.init(false, this.recordForm.id, this.filePath)
        }).catch(() => {
        })
      }
    },

    handleRemoveFolder(row) {
      if (row.isBuiltIn === 1) {
        this.$modal.msgWarning('内置文件夹无法删除')
        return
      }
      if (row.isEncryption === '1') {
        this.$modal.msgWarning('加密文件夹无法删除')
        return
      }
      if (row.isAllowDeleted === '0') {
        this.$modal.msgWarning('此文件夹不允许删除')
        return
      }
      this.$confirm(`此操作将永久删除文件夹[${row.name}], 是否继续?`, '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('removeFileCatalog', { id: row.id }).then(response => {
          this.$modal.msgSuccess('操作成功')
          this.handleFilter()
        }).catch(() => {})
      }).catch(() => {})
    }

  }
}
</script>
<style lang="scss" scoped>
#systemDocument{

}

</style>
